<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid red;"></canvas>
		<br>
		<input id="l_btn" type="button" value="向左旋转" />
		<input id="r_btn" type="button" value="向右旋转" />
		<script type="text/javascript">
			var canvas = document.getElementById("canvas")
			var cxt = canvas.getContext('2d')
			cxt.fillStyle = "rosybrown"
			cxt.fillRect(30, 30, 50, 50)

			var left_btn = document.getElementById("l_btn")
			left_btn.onclick = function() {
				// cxt.clearRect(0, 0, canvas.width, canvas.height)
				cxt.rotate(-Math.PI/15)
				cxt.fillStyle="royalblue"
				cxt.fillRect(30, 30, 50, 50);
			}
			var right_btn = document.getElementById("r_btn")
			right_btn.onclick = function() {
				// cxt.clearRect(0, 0, canvas.width, canvas.height)
				cxt.rotate(Math.PI/15)
				cxt.fillStyle="palegoldenrod"
				cxt.fillRect(30, 30, 50, 50);
			}
		</script>
	</body>
</html>
